<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>鼠标hover特效</title>
	<style type="text/css">
		body {
			color: #ccc;
			background-color: black;
		}

		h1 {
			font-size: 14px;
			font-family: "Microsoft Yahei";
			text-align: center;
		}

		.change {
			display: block;
			width: 400px;
			height: 400px;
			background: url(bg.png) no-repeat center;
			background-size: cover;
			border: 1em solid rgba(255, 255, 255, .8);
			margin: 50px auto;
		}

		.change img {
			display: block;
			width: 300px;
			height: 284px;
			opacity: .3;
			-webkit-transform: translate(-100px, -100px);

			/*这里的css设置了出场动画*/
			-webkit-transition: opacity 1s ease-in-out 3s, -webkit-transform 1s ease-in-out;
			transition: opacity 1s ease-in-out 3s, transform 1s ease-in-out;
		}

		.change:hover img {
			/*这个css role 只是设置了入场动画*/
			/*这个css role描述了从上一个transform状态到当前transform状态的补间动画*/
			-webkit-transform: translate(0px, 0px);
			opacity: 1;
			-webkit-transition: opacity 1s ease-in-out, -webkit-transform 1s ease-in-out .1s;
			transition: opacity 1s ease-in-out, transform 1s ease-in-out .1s;
			/*transform和transition在同一条css 规则时表示属性切换到当前状态的 过渡效果（补间动画）*/
		}
	</style>
</head>

<body>
	<h1>请使用webkit内核标准浏览器查看效果</h1>
	<a href="#" class="change ">
		<img src="ce.png" alt="" />
	</a>
</body>

</html>